<template>
	<!-- 排行榜页面 -->
	<view>
		<view style="height:300rpx;">
		<view class="Topheader">
			<view class="qie_bang">
				<view :class="[qie_bang_sm_active ==index ? 'qie_bang_sm_active qie_bang_sm' : 'qie_bang_sm']" v-for="(toplist,index) in toplist" :key="index" @tap="changetoplist(index)">
					{{toplist}}
				</view>
			</view>
			<view class="Topheader_box">
				<view class="Topheader_box_left">
					<view class="Topheader_box_left_tit">
						名次
					</view>
					<view class="Topheader_box_left_text">
						 NO.未上榜        
					</view>
				</view>
				<view class="Topheader_box_cen">
					<image src="http://thirdwx.qlogo.cn/mmopen/9kibjKzqKf8H12BxOk7T3UeBIfichjsb0noOibrn3741aZumfU1TvN7bbO7rr81sLguKmb4grCj3vL5hafzECGHmS7YMNDNQp0f/132" mode="widthFix" class="tou_img"></image>
					<view class="Topheader_box_cen_text">
						白芷 
					</view>
				</view>
				<view class="Topheader_box_left">
					<view class="Topheader_box_left_tit">
						人数
					</view>
					<view class="Topheader_box_left_text">
						 0     
					</view>
				</view>
			</view>
		</view>
		</view>
		
		<view class="qie_smbang">
			<view :class="[qie_smbang_sm_active ==index ? 'qie_smbang_sm_active qie_smbang_sm' : 'qie_smbang_sm']" v-for="(smlist,index) in smlist" :key=index @tap="changesmlist(index)">
					近<view class="jns">{{smlist}}</view>日
			</view>
		</view>
		
		<view class="list_ul">
			<view class="list_li" v-for="(poplist,index) in poplist.slice(0,100)">
				<view class="list_li_left">
					<image  v-if="poplist.no==1" src="../../static/bang1.png" class="bang_img" mode="widthFix"></image>
					<image  v-else-if="poplist.no==2" src="../../static/bang2.png" class="bang_img" mode="widthFix"></image>
					<image  v-else-if="poplist.no==3" src="../../static/bang3.png" class="bang_img" mode="widthFix"></image>
					<view v-else>{{poplist.no}}</view>
				</view>
				<view class="list_li_cen">
					<image :src="poplist.src" class="smtou" mode="widthFix"></image>
					<view class="name">{{poplist.name}}</view>
				</view>
				<view class="list_li_right">
					{{poplist.chaonum}}
				</view>
			</view>
		</view>
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data(){
			return{
				topState:false,
				toplist:['人气榜','收入榜'],  //顶部大榜单
				qie_smbang_sm_active:0,  //日期榜单默认为10天
				smlist:[10,20,30],  //切换日期榜单
				qie_bang_sm_active:0,  //默认人气榜
				poplist:[
					{
						no:1,
						src:'http://thirdwx.qlogo.cn/mmopen/lueOyZwpiaaiaz7aFfJ0xUoKmcBYAXybgslp0Kr708IvlITFeNX81lMk8SMJI7EYvs2XAMeg2oFvranclTOrAUhLoArluzrqQl/132',
						name:'周灿',
						chaonum:23718
					},
					{
						no:2,
						src:'http://thirdwx.qlogo.cn/mmopen/lueOyZwpiaaiaz7aFfJ0xUoKmcBYAXybgslp0Kr708IvlITFeNX81lMk8SMJI7EYvs2XAMeg2oFvranclTOrAUhLoArluzrqQl/132',
						name:'周灿',
						chaonum:23718
					},
					{
						no:3,
						src:'http://thirdwx.qlogo.cn/mmopen/lueOyZwpiaaiaz7aFfJ0xUoKmcBYAXybgslp0Kr708IvlITFeNX81lMk8SMJI7EYvs2XAMeg2oFvranclTOrAUhLoArluzrqQl/132',
						name:'周灿',
						chaonum:23718
					},
					{
						no:4,
						src:'http://thirdwx.qlogo.cn/mmopen/lueOyZwpiaaiaz7aFfJ0xUoKmcBYAXybgslp0Kr708IvlITFeNX81lMk8SMJI7EYvs2XAMeg2oFvranclTOrAUhLoArluzrqQl/132',
						name:'周灿',
						chaonum:23718
					},
					{
						no:5,
						src:'http://thirdwx.qlogo.cn/mmopen/lueOyZwpiaaiaz7aFfJ0xUoKmcBYAXybgslp0Kr708IvlITFeNX81lMk8SMJI7EYvs2XAMeg2oFvranclTOrAUhLoArluzrqQl/132',
						name:'周灿',
						chaonum:23718
					},
					{
						no:6,
						src:'http://thirdwx.qlogo.cn/mmopen/lueOyZwpiaaiaz7aFfJ0xUoKmcBYAXybgslp0Kr708IvlITFeNX81lMk8SMJI7EYvs2XAMeg2oFvranclTOrAUhLoArluzrqQl/132',
						name:'周灿',
						chaonum:23718
					},
				]
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods:{
			changetoplist (index){  //改变顶部大榜单切换
				this.qie_bang_sm_active=index;
			},
			changesmlist (index){ //改变切换日期榜单
				this.qie_smbang_sm_active=index;
			},
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　}
		}
	}
</script>

<style lang="scss">
	.Topheader{
		width:100%;
		height:300rpx;
		background:url(../../static/tpbg.png) no-repeat;
		background-size: 100%;
		background-position-y: bottom;
		display: flex;
		flex-wrap:wrap;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		top:0;
		z-index: 9999;
	}
	.Topheader_box{
		width:80%;
		display: flex;
		justify-content: space-between;
		align-items:center;
		flex-wrap:wrap;
	}
	.Topheader_box_left{
		width:30%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		color:#fff;
	}
	.Topheader_box_left_tit{
		width:100%;
		text-align: center;
		font-size:30rpx;
	}
	.Topheader_box_left_text{
		font-size:25rpx;
		margin-top:5rpx;
	}
	.Topheader_box_cen{
		width:40%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
	}
	.tou_img{
		width:120rpx;
		border-radius: 100rpx;
	}
	.Topheader_box_cen_text{
		width:100%;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color:#fff;
		margin-top:5rpx;
		font-size:25rpx;
	}
	.qie_bang{
			width: 60%;
		    height: 70rpx;
		    margin: 10rpx auto;
		    border-radius: 100rpx;
		    display: flex;
		    justify-content: space-around;
		    align-items: center;
		    box-shadow: 4rpx 4rpx 30rpx rgb(241, 182, 215);
	}
	.qie_bang_sm{
		    width: 49%;
		    height: 90%;
		    border-radius: 100rpx;
		    display: flex;
		    justify-content: space-around;
		    align-items: center;
		    color: #fff;
		    font-size: 33rpx;
		    font-weight: 200;
	}
	.qie_bang_sm_active{
		    background: rgb(255,147,196);
	}
	.jns{
		    font-weight: 500;
		    color: #f3801e;
			font-size: 30rpx;
	}
	.qie_smbang{
		    width: 90%;
		    height: 80rpx;
		    margin: 30rpx auto;
		    border-radius: 100rpx;
		    display: flex;
		    justify-content: space-around;
		    align-items: center;
		    box-shadow: 4rpx 4rpx 30rpx rgb(241, 182, 215);
	}
	.qie_smbang_sm{
		    width: 49%;
		    height: 90%;
		    border-radius: 100rpx;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    color: #000;
		    font-size: 30rpx;
		    font-weight: 200;
	}
	.qie_smbang_sm_active{
		   background: rgb(255,147,196);
	}
	.list_ul{
		width:90%;
		margin:0 auto;
	}
	.list_li{
		padding:15rpx 0;
		border-bottom:2rpx solid #ededed;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.list_li_left{
		width:15%;
		font-size:30rpx;
		text-align: center;
	}
	.list_li_cen{
		width:80%;
		display: flex;
		align-items: center;
	}
	.list_li_right{
		white-space: nowrap;
		color: #dbb267;
		font-weight: 700;
		font-size: 28rpx;
	}
	.bang_img{
		width:70rpx;
	}
	.smtou{
		width:80rpx;
		border-radius: 100rpx;
		margin-right:15rpx;
	}
	.name{
		width:90%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
